<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" name="viewport">
    <meta content="ie=edge" http-equiv="X-UA-Compatible">
    <script src="{$oss}/active/newyear/js/rem.js"></script>
    <title>生日权益</title>
</head>
<style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }

    body {
        overflow-x: hidden;
        width: 100%;
    }

    .content {
        width: 89.333333%;
        margin: 1.03rem auto 0.5rem;
        box-shadow: 0.02rem 0.02rem 0.18rem 0 rgba(0, 0, 0, 0.2);
        border-radius: 0.2rem;
        font-size: 0;
        position: relative;
    }

    .astro-img {
        width: 100%;
    }

    .recode {
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }

    .avatar {
        width: 1.06rem;
        height: 1.06rem;
        border-radius: 0.53rem;
        position: absolute;
        top: -0.6rem;
        left: 42.2388%;
    }

    .avatar-icon {
        width: 0.905rem;
        height: 0.817rem;
        background: url("{$oss}/web/static/birthday/wish_icon.png") no-repeat center center;
        background-size: 100%;
        position: absolute;
        top: -1.11rem;
        left: 48.209%;
    }

    .nickname {
        width: 100%;
        line-height: 0.4rem;
        font-size: 0.26rem;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: rgba(51, 51, 51, 1);
        text-align: center;
        position: absolute;
        top: 0.73rem;
        left: -0rem;
    }

    .astro-data-txt {
        width: 100%;
        text-align: center;
        font-size: 0.26rem;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        line-height: 0.40rem;
        position: absolute;
        top: 1.13rem;
        left: 0;
    }

    .astro-desc {
        width: 100%;
        text-align: center;
        font-size: 0.30rem;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        line-height: 0.40rem;
        position: absolute;
        top: 2.3rem;
        left: 0;
    }

    .birth_text {
        width: 100%;
        position: absolute;
        bottom: 0.56rem;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    .small_birth_text {
        width: 100%;
        line-height: 0.4rem;
        font-size: 0.26rem;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        text-align: center;
        margin-top: 0.1rem;
    }

    .birth_bottom {
        width: 89.333333%;
        height:auto;
        margin: 0.1rem auto 0.5rem;
        border-radius: 0.2rem;
        background: url("{$oss}/web/static/birthday/birth_bottom.png?v=12") no-repeat center top;
        background-size: 100% auto;
        overflow: auto;
        overflow-x: hidden;
    }

    .equity {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        flex-direction: row;
        width: 5.9rem;
        height: auto;
        margin: 1.2rem auto 0.5rem;
    }

    .small_equity {
        width: 5.9rem;
        height: 1.6rem;
        margin-bottom: 0.3rem;
        background:rgba(255,255,255,1);
        box-shadow:0rem 0.02rem 0.2rem 0rem rgba(0,0,0,0.07);
        border-radius:0.08rem;
    }
    .small_equity:last-child{
        margin-bottom: 0;
    }
    .title {
        width:1.6rem;
        height:0.45rem;
        font-size:0.32rem;
        font-family:PingFangSC-Medium,PingFang SC;
        font-weight:500;
        color:rgba(51,51,51,1);
        line-height:0.45rem;
        position: relative;
        top: 0.4rem;
        left: 0.34rem;
    }

    .des {
        width:3.9rem;
        height:0.37rem;
        font-size:0.26rem;
        font-family:PingFangSC-Regular,PingFang SC;
        font-weight:400;
        color:rgba(153,153,153,1);
        line-height:0.37rem;
        position: relative;
        top: 0.45rem;
        left: 0.34rem;
    }

    .coupon{
        width: 1.15rem;
        height: 1.2rem;
        position: relative;
        top: -0.6rem;
        left: 4.5rem;
    }

    .music-box img {
        animation: music_run 3s linear infinite;
    }

    @-webkit-keyframes music_run {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    }

    .music_logo {
        width: 0.5rem;
        height: 0.5rem;
        position: fixed;
        top: 0.3rem;
        right: 0.3rem;
        z-index: 999999999;
    }

    .message-box {
        width: 100%;
        position: fixed;
        bottom: 3.72rem;
        text-align: center;
        display: none;
        z-index: 1000;
    }

    .message {
        display: inline-block;
        font-size: 0.28rem;
        padding: 0.14rem 0.26rem;
        border-radius: 0.18rem;
        background-color: #6F6F6F;
        color: white;
    }
</style>
<body>
<div class="music-box">
    <img id="tt" class="music_logo" src="{$oss}/web/static/birthday/musicing.png" onclick="musicplay(this)">
    <audio id="bg_music" src="{$oss}web/static/birthday/birth.mp3" loop="loop"></audio>
</div>
<div class="content">
    <img class="astro-img" src="{$oss}{$astro_img}" alt="">
    <div class="recode">
        <img class="avatar" src="{$oss}{$avatar}" alt="">
        <div class="avatar-icon"></div>
        <p class="nickname">{$nickname}</p>
        <p class="astro-data-txt">{$astro_data_text}</p>
<!--        <p class="astro-desc">{$astro_desc}</p>-->
    </div>
    <div class="birth_text">
        <p class="small_birth_text">今天是你的公历生日</p>
        <p class="small_birth_text">{$birth_text}</p>
        <p class="small_birth_text">星座女神团队祝你生日快乐</p>
    </div>
</div>
<div class="birth_bottom">
 <div class="equity">
     {foreach $coupon as $cp}
     <div class="small_equity" onclick="commonJsToNative('{$cp['target']}','{$cp['link']}','common_js_to_native','生日领取权益页-{$cp['link']}')">
         <p class="title">{$cp['name']}</p>
         <p class="des">{$cp['des']}</p>
         <img class="coupon" src="{$oss}{$cp['img']}" alt="">
     </div>
     {/foreach}
 </div>
</div>
<div class="message-box">
    <div class="message"></div>
</div>
</body>
<script src="{$oss}active/seven/js/jquery-v2.1.1.min.js"></script>
<script src="/static/vip/js/common_func.js?v=1"></script>
<script type="text/javascript">

    var app_type = '{$app_type}'
    var version = '{$version}'
    document.addEventListener("visibilitychange", function() {
        var string = document.visibilityState
        {if condition="($app_type == 'ios')"}
            if (string === 'hidden') {  // 当页面由前端运行在后端时，出发此代码
                $('#tt').css({animationPlayState: "paused"}).attr('src', "{$oss}/web/static/birthday/music_stop.png");
                audio.pause();
            }
        {else /}
            if (string === 'hidden') {  // 当页面由前端运行在后端时，出发此代码
                audio.pause();
            }
            if (string === 'visible') {   // 当页面由隐藏至显示时
                audio.play();
            }
        {/if}
    });

    var audio = $('#bg_music')[0];
    audio.play();

    /**
     * 音乐播放
     */
    function musicplay(obj) {
        var status = audio.paused; // 是否暂停播放
        if (status) {
            audio.play();
            $(obj).css({animationPlayState: "running"}).attr('src', "{$oss}/web/static/birthday/musicing.png");
        } else {
            $(obj).css({animationPlayState: "paused"}).attr('src', "{$oss}/web/static/birthday/music_stop.png");
            audio.pause();
        }
    };


    var birthdayGiveRes = {$boon_give_res};

    if (birthdayGiveRes.is_show_msg === 1) {
        message(birthdayGiveRes.msg);
    }

    function message(text) {
        $('.message').text(text);
        $('.message-box').show();
        setTimeout(function () {
            $('.message-box').hide();
        }, 2500);
    }
    /**
     * 通用跳转
     * @param target
     * @param link
     * @param umeng_event_name
     * @param umeng_event_label
     */
    function commonJsToNative(target, link, umeng_event_name, umeng_event_label) {
        if (!target)
            return;
        switch (app_type) {
            case 'ios':
                window.webkit.messageHandlers.commonJsToNative.postMessage({
                    'target': target,
                    'link': link,
                    'umeng_event_name': umeng_event_name,
                    'umeng_event_label': umeng_event_label
                });
                break;
            case 'android':
                console.log('android')
                if (version)
                    androidwebview.commonJsToNative(target, link, umeng_event_name, umeng_event_label)
                else
                    androidwebview.commonJsToNative(target, link)
                break;
            default:
                console.log('not ios or android')
                if ('link' == target) {
                    window.location.href = link
                }
        }
    }
</script>
{include file="../apps/web/view/public/sensors.html" /}
<script>
    var cnzz_s_tag = document.createElement('script');
    cnzz_s_tag.type = 'text/javascript';
    cnzz_s_tag.async = true;
    cnzz_s_tag.charset = 'utf-8';
    cnzz_s_tag.src = 'https://w.cnzz.com/c.php?id=1279031890&async=1';
    var root_s = document.getElementsByTagName('script')[0];
    root_s.parentNode.insertBefore(cnzz_s_tag, root_s);
</script>
</html>
